import { useState } from 'react';
import './index.scss';
import Carousel from '../../../components/MaterialCenter/Carousel';
import Logo from '../../../components/Logo/Logo';
import Recommendedforyou from '../../../components/Recommendedforyou/Recommendedforyou';
import Summer from '../../../components/Summer/Summer';
import FlowerSea from '../../../components/FlowerSea/FlowerSea';
import Hotimage from '../../../components/Hotimage/Hotimage';
import Typeface from '../../../components/Typeface/Typeface';

import { Tabs } from 'antd';
interface CarouselProps {
    TITLE: React.ReactNode;
    TITLE1: React.ReactNode;
}

const Index: React.FC<CarouselProps> = () => {
    const [flag, setFlag] = useState(false);
    const [keys, setKeys] = useState('0');
    const onChange = (key: string) => {
        setKeys(key);
        let items1 = [...items]
        console.log(items1);
        console.log(key);

        items1.forEach((item) => {
            if (item.key == key) {
                item.flag == true
            }
            else {
                item.flag = false
            }
        })
        setItems(items1)
        localStorage.setItem('activekey', key)
    };
    const [items, setItems] = useState([
        {
            key: '0',
            icon: "",
            hovericon: "",
            title: '图片',
            flag: false
        },
        {
            key: '1',
            icon: "",
            hovericon: "",
            title: '素材',
            flag: false,
        },
        {
            key: '2',
            icon: "https://beta.chuangkit.com/_nuxt/img/1bd640f.svg",
            hovericon: "https://beta.chuangkit.com/_nuxt/img/dae135b.svg",
            title: '字体',
            flag: false
        },
    ]);
    const mousemove = (val: any) => {
        // console.log(val, '滑过的val');
        let items1 = [...items]
        items1.forEach((item) => {
            if (item.key == val.key) {
                item.flag = true
            }
            else {
                item.flag = false
            }
        })
        setItems(items1)
    }
    const [defaultActiveKey, setDefaultActiveKey] = useState(localStorage.getItem('activekey') as string ? localStorage.getItem('activekey') as string : '0')
    return (
        <div className='box1' style={{ overflow: "auto" }}>
            <div className="top1">
                <Carousel TITLE={'奔赴夏日'} TITLE1={`正版字体`} />
                <div className="tabs1">
                    <Tabs
                        defaultActiveKey={defaultActiveKey} onChange={onChange}>
                        {
                            items.map((item: any, index: number) => {
                                return <Tabs.TabPane key={index}
                                    tab={
                                        <div className="icon_container" onMouseOver={() => mousemove(item)}>
                                            <img src={item.flag ? item.hovericon : item.icon} className="icon_img" />
                                            <span className="icon_label" style={{ color: '#fff' }}>{item.title}</span>
                                        </div>
                                    }
                                >
                                </Tabs.TabPane>
                            })
                        }
                    </Tabs>
                </div>
            </div>

            <div className='below'>
                <div>
                    {
                        keys === '0' ? <div className="main">
                            <Logo />
                            <Recommendedforyou />
                            <Summer />
                            <FlowerSea />
                        </div> : ''
                    }
                </div>
                <div>
                    {
                        keys === '1' ? <div className="main">
                            <Hotimage />
                        </div> : ''
                    }
                </div>
                <div>
                    {keys === '2' ? <div className="main">
                        <Typeface />
                    </div> : ''}
                </div>
            </div>
        </div>
    );
};

export default Index;